<template>
	<view class="tui-nomore-class tui-loadmore-none">
		<view :class="[isDot ? 'tui-nomore-dot' : 'tui-nomore']">
			<view :style="{ backgroundColor: backgroundColor }" :class="[isDot ? 'tui-dot-text' : 'tui-nomore-text']">
				<text>{{ isDot ? dotText : text }}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'

const emit = defineEmits([])

const props = defineProps({
	//当前页面背景颜色,#fafafa,#f3f4f6
	backgroundColor: {
		type: String,
		default: '#f3f4f6'
	},
	//是否以圆点代替 "没有更多了"
	isDot: {
		type: Boolean,
		default: false
	},
	//isDot为false时生效
	text: {
		type: String,
		default: '没有更多了'
	}
})

const dotText = ref('●')
</script>

<style lang="scss" scoped>
.tui-loadmore-none {
	width: 50%;
	margin: 1.5em auto;
	line-height: 1.5em;
	font-size: 24rpx;
	display: flex;
	justify-content: center;
}

.tui-nomore {
	width: 100%;
	height: 100%;
	position: relative;
	display: flex;
	justify-content: center;
	margin-top: 10rpx;
	padding-bottom: 6rpx;
}

.tui-nomore::before {
	position: absolute;
	content: ' ';
	width: 100%;
	top: 18rpx;
	left: 0;
	border-bottom: 1rpx solid #dadbde;
	transform: scaleY(0.5);
}

.tui-nomore-text {
	position: relative;
	z-index: 2;
	color: #999;
	font-size: 24rpx;
	text-align: center;
	padding: 0 18rpx;
	height: 36rpx;
	line-height: 36rpx;
}

.tui-nomore-dot {
	position: relative;
	text-align: center;
	display: flex;
	justify-content: center;
	margin-top: 10rpx;
	padding-bottom: 6rpx;
}

.tui-nomore-dot::before {
	content: '';
	position: absolute;
	border-bottom: 1rpx solid #dadbde;
	transform: scaleY(0.5) translateX(-50%);
	width: 360rpx;
	top: 18rpx;
	left: 50%;
}

.tui-dot-text {
	position: relative;
	color: #dadbde;
	font-size: 10px;
	text-align: center;
	width: 50rpx;
	height: 36rpx;
	line-height: 36rpx;
	transform: scale(0.8);
	transform-origin: center center;
	z-index: 1;
}
</style>
